<template>
  <view class="container">
    <view>
      <image src="../../static/img/loginbgc.png" mode="aspectFill" style="width: 100%; height: 650rpx"></image>
    </view>
    <view style="width: 180rpx; height: 180rpx; background-color: #fff; position: absolute; top: 300rpx; left: 270rpx">
      <image src="../../static/img/logo.png" mode="aspectFill" class="logo"></image>
      <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; text-align: center; margin-top: 20rpx">学霸到家</view>
    </view>
    <!-- 绑定手机号 -->
    <view class="bindphone">
      <image src="../../static/icon/phone.png" mode="aspectFill" style="width: 30rpx; height: 40rpx; margin-right: 30rpx"></image>
      <input type="text" placeholder="请输入您的手机号" class="ipt" />
    </view>
    <!-- /验证码 -->
    <view class="bindphone">
      <image src="../../static/icon/phonecode.png" mode="aspectFill" style="width: 34rpx; height: 40rpx; margin-right: 30rpx"></image>
      <input type="text" placeholder="请输入短信验证码" />
      <view class="getcode" @click="getcode">获取验证码</view>
    </view>
    <!-- 登录 -->
    <view class="login" @click="login">登录</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 点击获取验证码
    getcode() {
      console.log('获取验证码');
    },
    // 登录
    login() {
      console.log('登录了');
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .logo {
    width: 180rpx;
    height: 180rpx;
  }
  .bindphone {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 670rpx;
    height: 100rpx;
    padding: 30rpx;
    background: #fff;
    margin: 0 40rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f8f8f8;
    .ipt {
      flex: 1;
    }
    .getcode {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #3553e8;
      margin-left: 30rpx;
    }
  }
  .login {
    width: 690rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    margin: 80rpx 30rpx 0;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
